<style>
.image {
  width: 100%;
  display: block;
}
.col_4 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.member-chart {
  margin-top: 20px;
  margin-bottom: 20px;
}
.attendance {
  display: flex;
}
.attDate {
  display: flex;
  margin-left: 10%;
  width: 300px;
}
.dd-dataCenter-heading {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  padding-top: 5px;
  padding-left: 5px;
  font-weight: bold;
}
.padding-top20 {
  padding-top: 20px;
}
.dd-dataCenter-panel {
  max-width: 260px;
  width: 100%;
  height: 180px;
  border-radius: 4px;
  border: 1px solid #dfdfdf;
  box-shadow: 0;
  background: #fff;
  float: left;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 8px;
}
.dd-dataCenter-panel-hd {
  background: #cac9c9;
  color: #333;
  border-bottom: 1px solid #e8e8e8;
  font-size: 14px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 16px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 15px;
  line-height: 1;
  text-align: center;
}
.dd-person-status {
  width: auto;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  padding: 0 35px;
}
.pull-right {
  padding: 5px 5px;
  float: right;
  font-size: 16px;
}
</style>

<template>
  <basic-container>
    <el-container>
      <el-main id="el-main">
        <div class="col-sm-12 member-chart ng-isolate-scope el-card box-card is-always-shadow" style="padding:10px 5px;">
          <h4 class="dd-dataCenter-heading ng-binding" data-spm-anchor-id="0.0.0.i3.4bad77a3uZsHDb">职工信息查詢
            <span class="text-muted ng-binding" data-spm-anchor-id="0.0.0.i4.4bad77a3uZsHDb"></span>
          </h4>
          <div class="col-sm-12">
            <div class="col-sm-12 member-chart ng-scope el-card box-card" style="padding:10px 15px 0 15px">
              <el-form :inline="true" :model="filters" size="small" ref="filters" class="searchForm">
                <el-form-item class="el-form-item" label="职工姓名" prop="name">
                  <el-input class="filter-item" placeholder="职工姓名" v-model="filters.name"></el-input>
                </el-form-item>
                <el-form-item class="el-form-item" label="身份证号" prop="idCard">
                  <el-input class="filter-item" placeholder="身份证号" v-model="filters.idCard"></el-input>
                </el-form-item>
                <span class="bth_search">
                  <el-form-item>
                    <el-button type="success" icon="el-icon-search" v-on:click="getDataGrid(true)">查询</el-button>
                  </el-form-item>
                  <el-form-item>
                    <el-button icon="el-icon-refresh" @click="resetSearchForm('filters')">重置</el-button>
                  </el-form-item>
                </span>
              </el-form>
            </div>
            <el-table :data="gridDatas" id="dataGrid" empty-text="当前企业没有该职工信息" border stripe size="mini" style="width: 100%;" height="280px">
              <el-table-column header-align="center" align="center" prop="index" label="序号" width="60px"></el-table-column>
              <el-table-column header-align="center" align="center" prop="company" label="所属企业" width="180px" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="username" label="职工姓名" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="idCard" label="身份证号" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="phone" label="联系方式" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="position" label="职位" show-overflow-tooltip></el-table-column>

              <!-- <el-table-column header-align="center" align="center" prop="nation" label="民族" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="education" label="最高学历" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="marriage" label="婚姻状况" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="time" label="入司时间" show-overflow-tooltip></el-table-column> -->
              <el-table-column header-align="center" align="center" prop="ck" label="存款金额" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="lc" label="理财金额" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="dk" label="贷款金额" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="exception" label="异常信息" show-overflow-tooltip></el-table-column>

            </el-table>
          </div>
        </div>
      </el-main>
    </el-container>
  </basic-container>
</template>
<script>
import { getToken, setToken, removeToken, getFileIp } from '@/util/auth'
import request from '@/router/axios'
import deptTree from '../report/deptTree.vue'
export default {
  name: 'repairRegister',
  components: {
    deptTree
  },
  data() {
    return {
      statusOptions: [],
      communityOptions: [],
      buildingOptions: [],
      unitOptions: [],
      houseOptions: [],
      communityNames: ['入住率', '空置率'],
      creditNames: ['缴费正常', '偶尔欠费', '经常欠费'],
      ageNames: ['00后', '90后', '80后', '70后', '60后', '60前'],
      liftUserOptions: [
        {
          id: '',
          name: ''
        }
      ],
      //单元过滤条件
      filters: {
        name: '',
        idCard: ''
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      url: {
        //单元数据
        list: '/admin/repairRecord/page',
        save: '/admin/repairRecord/add',
        approve: '/admin/repairRecord/approve',
        submitSug: '/admin/repairRecord/fenpei'
      },
      gridDatas: [],
      zhangsan: [
        {
          index: 1,
          company: '北京云集汇通科技有限公司',
          username: '李鹏伟',
          idCard: '370481199306031533',
          nation: '蒙古族',
          phone: 17547400800,
          position: '研发工程师',
          education: '本科',
          marriage: '未婚',
          time: '2017-02-23',
          exception: '无',
          ck: 2.3,
          lc: 0,
          dk: 0
        }
      ],
      liuyu: [
        {
          index: 1,
          company: '北京云集汇通科技有限公司',
          username: '史新峰',
          idCard: '370481199306031534',
          phone: 18369656586,
          nation: '汉族',
          position: '研发工程师',
          education: '本科',
          marriage: '已婚',
          time: '2017-02-28',
          exception: '无',
          ck: 36.2,
          lc: 1.2,
          dk: 30
        }
      ],
      suggestTypeOptions: [],
      sort: {
        sort: 'sort',
        order: 'asc'
      },
      total: 0,
      page: 1,
      pageSize: 10,
      listLoading: false,
      sels: [],
      addFormRules: {
        liftUser: [
          {
            required: true,
            message: '请选择职工 '
          }
        ],
        description: [
          {
            required: true,
            message: '请填写问题描述 '
          }
        ]
      }
    }
  },
  methods: {
    resetSearchForm() {
      this.filters.name = ''
      this.filters.idCard = ''
    },
    getDataGrid() {
      if (this.filters.name == '史新峰') {
        this.gridDatas = this.liuyu
      } else if (this.filters.name == '李鹏伟') {
        this.gridDatas = this.zhangsan
      } else {
        this.gridDatas = this.gridDatas
      }
    },
    drawLine() {
      const a = this
      var normal = {
        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{per|{c}}',
        backgroundColor: '#eee',
        borderColor: '#aaa',
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          a: {
            color: '#999',
            lineHeight: 22,
            align: 'center'
          },
          hr: {
            borderColor: '#aaa',
            width: '100%',
            borderWidth: 0.5,
            height: 0
          },
          b: {
            fontSize: 16,
            lineHeight: 33
          },
          per: {
            color: '#eee',
            backgroundColor: '#334455',
            padding: [2, 4],
            borderRadius: 2
          }
        }
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      let myAgeChart = this.$echarts.init(document.getElementById('myAgeChart'))
      let myCreChart = this.$echarts.init(document.getElementById('myCreChart'))
      let areaChart = this.$echarts.init(document.getElementById('areaChart'))
      var option = {
        title: {
          text: '员工学历情况',
          //subtext: '虚构数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['初中及以下', '高中', '专科', '本科', '研究生及以上']
        },
        series: [
          {
            name: '员工学历',
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {
                value: 1,
                name: '初中及以下',
                label: {
                  normal: normal
                }
              },
              {
                value: 2,
                name: '高中',
                label: {
                  normal: normal
                }
              },
              {
                value: 11,
                name: '专科',
                label: {
                  normal: normal
                }
              },
              {
                value: 19,
                name: '本科',
                label: {
                  normal: normal
                }
              },
              {
                value: 4,
                name: '研究生及以上',
                label: {
                  normal: normal
                }
              }
            ]
          }
        ]
      }
      var creOption = {
        title: {
          text: '人员稳定情况',
          //subtext: '虚构数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} :  {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: 'center',
          data: ['小于1年', '1-3年', '3-10年', '10年以上']
        },
        series: [
          {
            name: '入司时间',
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {
                value: 12,
                name: '小于1年',
                label: {
                  normal: normal
                }
              },
              {
                value: 24,
                name: '1-3年',
                label: {
                  normal: normal
                }
              },
              {
                value: 21,
                name: '3-10年',
                label: {
                  normal: normal
                }
              },
              {
                value: 2,
                name: '10年以上',
                label: {
                  normal: normal
                }
              }
            ]
          }
        ]
      }

      var ageOption = {
        title: {
          text: '员工年龄分布',
          //subtext: '虚构数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: 'center',
          data: ['小于20岁', '20-30岁', '30-40岁', '大于40岁']
        },
        series: [
          {
            name: '年龄分布',
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {
                value: 60,
                name: '小于20岁',
                label: {
                  normal: normal
                }
              },

              {
                value: 450,
                name: '20-30岁',
                label: {
                  normal: normal
                }
              },
              {
                value: 280,
                name: '30-40岁',
                label: {
                  normal: normal
                }
              },
              {
                value: 120,
                name: '40岁以上',
                label: {
                  normal: normal
                }
              }
            ]
          }
        ]
      }
      var typeOption = {
        title: {
          text: '组织架构分布',
          //subtext: '虚构数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: -5,
          left: 'center',
          data: ['高级领导', '中级领导', '一般员工', '其他']
        },
        series: [
          {
            name: '组织架构',
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {
                value: 4,
                name: '高级领导',
                label: {
                  normal: normal
                }
              },

              {
                value: 11,
                name: '中级领导',
                label: {
                  normal: normal
                }
              },
              {
                value: 36,
                name: '一般员工',
                label: {
                  normal: normal
                }
              },
              ,
              {
                value: 3,
                name: '其他',
                label: {
                  normal: normal
                }
              }
            ]
          }
        ]
      }
      // 绘制图表
      myChart.setOption(option)
      myAgeChart.setOption(ageOption)
      myCreChart.setOption(creOption)
      areaChart.setOption(typeOption)
    },
    treeNodeClick(data, node) {
      if (data.leaf == true) {
        this.drawLine()
      }
    }
  },
  mounted() {}
}
</script>
